import React from 'react';
// import G6Editor from '@antv/g6-editor';
const G6Editor = require('../../../g6-editor/src');
import styles from './index.less';

class Contextmenu extends React.Component {

  componentDidMount() {
    const { editor } = this.props;
    const createContextmenu = this.getCreateContextmenu();
    const contextmenu = createContextmenu(this.contextmenuContainer);
    editor.add(contextmenu);
  }

  getCreateContextmenu() {
    const { createContextmenu } = this.props;
    return createContextmenu || this.createContextmenu;
  }

  createContextmenu = (container) => {
    return new G6Editor.Contextmenu({
      container,
    });
  }

  render() {
    const { className = '' } = this.props;
    return (
      <div className={`contextmenu ${styles.flowchart_contextmenu} ${className}`} ref={el => { this.contextmenuContainer = el; }}>
        <div data-status="node-selected" className="menu">
          <div data-command="copy" className="command">
            <span>复制</span>
            <span>copy</span>
          </div>
          <div data-command="delete" className="command">
            <span>删除</span>
            <span>delete</span>
          </div>
        </div>
        <div data-status="multi-selected" className="menu">
          <div data-command="addGroup" className="command">
            <span>成组</span>
            <span>group</span>
          </div>
        </div>
        <div data-status="edge-selected" className="menu">
          <div data-command="delete" className="command">
            <span>删除</span>
            <span>delete</span>
          </div>
        </div>

        <div data-status="canvas-selected" className="menu">
          <div data-command="undo" className="command">
            <span>撤销</span>
            <span>undo</span>
          </div>
          <div data-command="redo" className="command">
            <span>重做</span>
            <span>redo</span>
          </div>
          <div data-command="pasteHere" className="command">
            <span>粘贴</span>
            <span>pasteHere</span>
          </div>
        </div>
      </div>
    );
  }
}

export default Contextmenu;
